<template>
    <view class="customerDetails">
        <uni-nav-bar fixed left-icon="left" :title="detailsData.customerName" @clickLeft="backHandle" class="unibarS">
            <block slot="right">
                <u-icon  @click="add()" name="plus" color="#4DACB1" size="22"></u-icon>
            </block>
        </uni-nav-bar>
        <!-- 主要内容 -->
        <view class="customerDetails-content">
            <!-- 客户信息 -->
            <view class="customer-info">
                <view class="customer-row" style="margin-bottom: 44rpx;">
                    <view class="item">
                        <view>客户状态</view>
                        <view>{{ bus_customer_status[detailsData.customerStatus] }}</view>
                    </view>
                    <view class="item">
                        <view>客户星级</view>
                        <view><u-rate v-model="detailsData.customerStarLevel" readonly></u-rate></view>
                    </view>
                    <view class="item">
                        <view>业务经理</view>
                        <view>{{ detailsData.businessManagerName }}</view>
                    </view>
                </view>
                <view class="customer-row">
                    <view class="item">
                        <view>客户类型</view>
                        <view>{{ busClientTypeDict[detailsData.customerType] }}</view>
                    </view>
                    <view class="item">
                        <view>手机号</view>
                        <view>{{ detailsData.phoneNumber }}</view>
                    </view>
                    <view class="item">
                        <view>下次跟进</view>
                        <view>{{ detailsData.nextFollowUpTime || '---' }}</view>
                    </view>
                </view>
            </view>
            <!-- 切换tab -->
            <view class="tab">
                <view v-for="item in tabList" :key="item.type" :class="{ active: tabIndex == item.type }"
                    @click="clickTabs(item)">
                    {{ item.label }}
                </view>
            </view>
            <!-- 切换的内容 -->
            <CusromerDetailed v-if="tabIndex == 1" :info="detailsData" ref="cusromerDetailed"></CusromerDetailed>
            <!-- 客户动态 -->
            <Trends v-if="tabIndex == 2" :id="detailsData.id" ref="trends"></Trends>
            <!-- 跟进记录 -->
            <Record v-if="tabIndex == 3" :id="detailsData.id" ref="record"></Record>
            <!-- 更多信息 -->
            <MoreInfo v-if="tabIndex == 4" :id="detailsData.id" ref="moreInfo"></MoreInfo>
        </view>
        <!-- 底部 -->
        <view class="bottom-box">
            <view @click="addFollow">
                <svg-icon svgPath="/static/svg/icon-gen.svg" color="#0C1019" size="18px" />
                <text>写新跟进</text>
            </view>
            <view @click="addOrder">
                <svg-icon svgPath="/static/svg/icon-jia.svg" color="#0C1019" size="18px" />
                <text>新建订单</text>
            </view>
            <view @click="openPopup()">
                <u-icon name="more-circle" color="#0C1019" size="22"></u-icon>
                <text>更多操作</text>
            </view>
        </view>
        <!-- 弹出框 -->
        <uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
            <view class="popup-box">
                <view class="popup-header">更多操作</view>
                <view class="popup-content">
                    <u-grid :border="false" col="4" @click="clickGrid">
                        <u-grid-item>
                            <view class="icon-box">
                                <u-icon name="edit-pen" color="#0C1019" :size="24"></u-icon>
                            </view>
                            <text class="grid-text">编辑客户</text>
                        </u-grid-item>
                        <u-grid-item>
                            <view class="icon-box">
                                <u-icon name="chat" color="#0C1019" :size="24"></u-icon>
                            </view>
                            <text class="grid-text">写新跟进</text>
                        </u-grid-item>
                        <u-grid-item>
                            <view class="icon-box">
                                <u-icon name="plus-circle" color="#0C1019" :size="24"></u-icon>
                            </view>
                            <text class="grid-text">新建任务</text>
                        </u-grid-item>
                        <u-grid-item>
                            <view class="icon-box">
                                <u-icon name="account-fill" color="#0C1019" :size="24"></u-icon>
                            </view>
                            <text class="grid-text">转移客户</text>
                        </u-grid-item>
                        <u-grid-item>
                            <view class="icon-box">
                                <u-icon name="plus-people-fill" color="#0C1019" :size="24"></u-icon>
                            </view>
                            <text class="grid-text">移入公海</text>
                        </u-grid-item>
                        <u-grid-item>
                            <view class="icon-box">
                                <u-icon :name="favorite? 'star-fill' : 'star'" color="#0C1019" :size="24"></u-icon>
                            </view>
                            <text class="grid-text">{{ favorite? "取消关注" : "重点关注" }}</text>
                        </u-grid-item>
                    </u-grid>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import CusromerDetailed from './components/cusromerDetailed.vue'
// 客户动态
import Trends from './components/trends.vue'
// 跟进记录
import Record from './components/record.vue'
// 更多信息
import MoreInfo from './components/moreInfo.vue'
import { convertToDict } from '@/common/utils'
export default {
    components: {
        CusromerDetailed,
        Trends,
        Record,
        MoreInfo
    },
    data() {
        return {
            id: null,
            detailsData: {},

            title: '创建客户',
            tabList: [
                { label: '客户明细', type: 1 },
                { label: '客户动态', type: 2 },
                { label: '跟进记录', type: 3 },
                { label: '更多信息', type: 4 },
            ],
            tabIndex: 1,
            favorite: false // 是否关注
        }
    },
    onLoad(options) {
        this.id = options.id
        this.getDetails()

        // 客户类型
        this.busClientTypeDict = convertToDict(JSON.parse(uni.getStorageSync('bus_client_type')));
        // 客户状态
        this.bus_customer_status = convertToDict(JSON.parse(uni.getStorageSync('bus_customer_status')));
    },
    onReachBottom() {
        console.log('上拉加载onReachBottom')
        if (this.tabIndex == 2) {
            this.$refs.trends.loadmore()
        } else if (this.tabIndex == 3) {
            this.$refs.record.loadmore()
        }
    },
    methods: {
        getDetails() {
			this.$http.get('/app/customer/detailedInforMtion/' + this.id, {}).then(res => {
				if (res.code == 200) {
                    this.detailsData = res.data
                    this.favorite = res.data.favoriteId ? true : false
				} else {
					uni.$u.toast(res.msg)
				}
			}).catch(err => {
                console.log(err)
			})
		},
        clickTabs(item) {
            this.tabIndex = item.type;
        },
        openPopup() {
            this.$refs.popup.open()
        },
        clickGrid(index) {
            if (index == 0) {
                // 编辑客户
                uni.redirectTo({
                    url: '/pages/crm/customer/createCustomer?type=edit&id=' + this.detailsData.id
                })
            } else if(index == 1) {
                // 新建跟进
                this.addFollow()
            } else if(index == 2) {
                // 新建任务
                uni.navigateTo({
                    url: '/pages/task/addTask'
                })
            } else if(index == 3) {
                // 转移客户
                uni.navigateTo({
                    url: '/pages/approval/transferCustomer?id=' + this.detailsData.id
                })
            } else if(index == 4) {
                // 转入公海
                uni.navigateTo({
                    url: '/pages/approval/transferPublic?id=' + this.detailsData.id
                })
            } else if(index == 5) {
                // 关注
                let id = this.detailsData.id
                let url = '/app/customer/favorite/'
                if(this.favorite) {
                    url = '/app/customer/cancelFavorite/'
                    id = this.detailsData.favoriteId
                }
                // 关注 || 取消关注
                this.$http.put(url + id, {}).then(res => {
                    let data = res.data
                    if (data.code == 200) {
                        if(this.favorite) {
                            uni.$u.toast('取消关注')
                        } else {
                            uni.$u.toast('关注成功')
                        }
                        this.getDetails()
                    } else {
                        uni.$u.toast(data.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        addOrder() {
			uni.navigateTo({
				url: '/pages/order/addOrder'
			})
		},
        // 新建跟进
		addFollow() {
			uni.navigateTo({
				url: '/pages/follow/addFollow'
			});
		},
        add() {
            uni.redirectTo({
                url: '/pages/crm/customer/createCustomer'
            })
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.unibarS {
    /deep/.uni-navbar__header {
        padding: 0 32rpx;
    }

    /deep/.uni-navbar__content {
        border-bottom: none !important;
        box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
    }

    .sub-btn {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(77, 172, 177, 1);
    }
}

.customerDetails {
    padding-bottom: 150rpx;
}

.customerDetails-content {
    margin: 20rpx 0;

    .customer-info {
        border-radius: 24rpx;
        background: rgba(255, 255, 255, 1);
        padding: 32rpx 0;

        .customer-row {
            display: flex;
            justify-content: space-between;
            text-align: center;

            .item {
                flex: 1;
                width: 0;
                padding: 0 15rpx;

                > :nth-child(1) {
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(103, 117, 133, 1);
                    margin-bottom: 8rpx;
                }

                > :nth-child(2) {
                    
                    font-size: 32rpx;
                    font-weight: 500;
                    color: rgba(12, 16, 25, 1);
                    // 超出隐藏
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }

    .tab {
        display: flex;
        justify-content: space-between;
        padding: 28rpx 32rpx;
        margin: 24rpx 0 24rpx 0;
        background: rgba(255, 255, 255, 1);
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(103, 117, 133, 1);

        .active {
            color: rgba(77, 172, 177, 1);
        }
    }
}

.bottom-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.1);
    padding: 32rpx 0;

    >view {
        display: flex;
        align-items: center;

        >text {
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
            margin-left: 8rpx;
        }
    }

}

.popup-box {
    padding: 32rpx 0;
    .popup-header {
        display: flex;
        justify-content: center;
        margin-bottom: 32rpx;
    }
    .icon-box {
        border-radius: 16rpx;
        background: #F2F2F2;
        width: 100rpx;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .grid-text {
        margin-top: 24rpx;
        margin-bottom: 32rpx;
    }
}
</style>